<template >
<div id="app0">
<div id="top-banner-container-1673910892574" class="activate-bar-container">
<div role="text" aria-label="今日头条·看见更大的世界">
  <span aria-hidden="true" class="slogan">畅享阅读</span>
</div>
<div type="text" aria-label="打开App" class="open" @click="return1">返回目录</div>
</div>

<div class="bgwhite">
  <div class="article__header">
<h5 class="article__title">{{title}}</h5>
  </div>

  <div class="article-container article-container-ios">
    <div id="fold-btn-container-1673910848239" class="fold-btn-container2">
<div class="fold-btn-content">
<article class="syl-article-base article syl-page-article syl-device-mobile">
<p v-for="ele in article">{{ele}}</p>
</article>
<el-row style="text-align: center;">

  <el-button type="primary" primary size="mini">上一章</el-button>
  <el-button type="success" primary @click="return1" size="mini">返回目录</el-button>
  <el-button type="primary" primary @click="next" size="mini">下一章</el-button>

</el-row>
</div>
    </div>
  </div>
</div>
</div>

</template>

<script>

 import axios from 'axios'
export default {

  data() {
    return {
      tokenid:{
            token:localStorage.getItem("token")
        },
      article:[{}],
       title:'标题'

    };
  },
  created() {
    this.iftoken()
  this.getNovel()

  },
  methods: {
    // 判断token过期了没
    iftoken(){
      let url='http://localhost:8098/iftoken';

      axios.post(url,this.tokenid).then(resp=>{
        let result=resp.data;
        if(result.code!==200){
           this.$message({
            showClose: true,
          message: 'token过期或未登录',
          type: 'error'
        });
        this.$router.push('/login')
        }
      })
    },
    getNovel() {
       let param = {
                   name:this.$route.query.id

                }
        let url='http://localhost:8098/getNovel'
     axios.post(url,param).then(resp=>{
        let result=resp.data;
        if(result.code===200){
            this.article=result.data.content.split(' ');
            this.title=result.data.title;

        }else{
           this.$message({
            showClose: true,
          message: result.errorMessage,
          type: 'error'
        });
        }
     })
  //   if(localStorage.getItem("flushnovel")==null){
  //   window.location.reload();
  //   localStorage.setItem("flushnovel",1)
  // }else{
  //   localStorage.removeItem("flushnovel")
  // }
    },
    return1(){
      this.iftoken();

      this.$router.push({path:'/novelbook',query:{id:this.$route.query.id.split("%")[0]}})
    },
     // 下一章
    next(){
this.iftoken()

        let url='http://localhost:8098/next';
           let param = `uid=${this.$route.query.id.split("%")[0]+"Q"+this.title}`
        axios.post(url,param).then(resp=>{
            let result=resp.data;
      if(result.code===200){
         this.article=result.data.content.split(' ');
            this.title=result.data.title;
            console.log(this.title)
           localStorage.setItem("novelname"+this.$route.query.id.split("%")[0],result.data.title)
  //          if(localStorage.getItem("flushcartoon0")==null){
  //   window.location.reload();
  //   localStorage.setItem("flushcartoon0",1)
  // }else{
  //   localStorage.removeItem("flushcartoon0")
  // }
//回到顶部
   document.getElementById("app0").scrollIntoView();
        }else{
            this.$message({
            showClose: true,
          message: result.errorMessage,
          type: 'error'
        });

        }
        })
    },

  }
};
</script>
<style scoped>
.syl-article-base {
    padding: 0 15px;
    text-align: justify;
    word-wrap: break-word;
    word-break: break-word;
    overflow: hidden;

    hyphens: auto;
}
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}
 .syl-page-article{
      font-family: -apple-system,helvetica,sans-serif;
    line-height: 1.71;
      margin: 0 10px;
    padding: 0;
    color: #222;
 }
.syl-device-mobile{
      font-family: -apple-system,helvetica,sans-serif;
    line-height: 1.71;
  font-size: 20px;
}
.fold-btn-content {
    margin-bottom: 0.64rem;
}
.fold-btn-container2 {
    position: relative;
}
.open {
    position: absolute;
    margin: 0.22rem 0;
    right: 0.32rem;
    width: 3.56rem;
    height: 0.56rem;
    line-height: 1.56rem;
    color: rgb(0, 0, 0);
    font-size: .72rem;
    text-align: center;
    border-radius: 0.28rem;
    background: #ffffff;
}
.slogan {
    font-size: .22rem;
    line-height: 1.28rem;
    color: #999;
    position: absolute;
    top: 0.56rem;
    left: 1.28rem;
}
.activate-bar-container {
    background-color: #fff;
    height: 2.5rem;
    border-bottom: 0.01rem solid #f2f2f2;
}
.article__header {
    position: relative;
    padding: 0.4rem 0.4rem 0.56rem;
}
.article__title {
    line-height: .72rem;
    font-weight: 700;
    color: #222;
    font-size: .48rem;
    margin-bottom: 0.32rem;
    text-align: center;
    font-size: 130%;
      margin-top: 0.5rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
    border: 0;
}
</style>
